<template>
    <div class="container">
        <div class="title">权益方案</div>
        <div class="desc">挑选更适合您的版本为合规助力</div>
        <div class="vip-list">
            <div class="vip-item" v-for="(item,index) in vipList" :key="index">
                <div class="vip-item-top">
                    <div class="vip-item-title">{{item.vipname}}</div>
                    <div class="vip-item-curprice">
                        <span>{{item.curprice}}</span>
                        <span>元/年</span>
                    </div>
                    <div class="vip-item-oldprice" v-if="item.oldprice">
                        <span>{{item.oldprice}}</span>
                        <span>元/年</span>
                    </div>
                </div>
                <div class="vip-item-bottom">
                    <div v-if="item.benefitslist.length>0">
                        <div class="vip-item-bottom-title">权益</div>
                        <div v-for="(val,key) in item.benefitslist" 
                            class="vip-item-bottom-benefits"
                                :key="key">
                            <span>权益{{ key + 1 }}:</span>
                            <span>{{ val.benefitsname }}</span>
                        </div>
                    </div>
                    <div v-else class="qidai">
                        敬请期待
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { getVipbenefits,getViplist } from '@/api/vip'
const vipList = ref('');
const vipbenefits = ref('');
const getList = ()=>{
    let data = {
        "data": {}
    }
    getViplist(data).then(res=>{
        vipList.value = res.data.viplist;
        console.log(res)
    })
}
getList();
const getVipbenefitsHandler = ()=>{
    let data = {
        "data": {}
    }
    getVipbenefits(data).then(res=>{
        vipbenefits.value = res.data.viplist;
        console.log(res)
    })
}
getVipbenefitsHandler();
</script>
<style lang="scss" scoped>
.container {
    width: 100%;
    height: 100%;
    overflow: auto;
    background: url(../../assets/images/benefitsBg.png)no-repeat center center/100%;
}
.title{
    font-family: MiSansVF_Medium;
    font-size: 40px;
    color: #000000;
    line-height: 53px;
    text-align: center;
    margin-top: 40px;
}
.desc{
    font-family: MiSansVF_Medium;
    font-size: 20px;
    color: #000000;
    line-height: 27px;
    margin-top: 20px;
    text-align: center;
}
.vip{
    &-list{
        display: flex;
        justify-content: center;
        margin-top: 40px;
    }
    &-item{
        width: 344px;
        margin-right: 48px;
        &-top{
            height: 344px;
            background: linear-gradient( 135deg, #2DB9FC 0%, #0E6EF6 100%);
            border-radius: 20px;
            overflow: hidden;
        }
        &-curprice{
            margin-top: 30px;
            text-align: center;
            span:nth-child(1){
                font-family: MiSansVF_Medium;
                font-size: 60px;
                color: #602801;
                text-align: center;
            }
            span:nth-child(2){
                font-family: MiSansVF_Medium;
                font-size: 20px;
                color: #602801;
            }
        }
        &-oldprice{
            text-align: center;
            span:nth-child(1){
                font-family: MiSansVF_Medium;
                font-size: 20px;
                color: #602801;
                text-align: center;
                text-decoration-line: line-through;
            }
            span:nth-child(2){
                font-family: MiSansVF_Medium;
                font-size: 14px;
                color: #602801;
            }
        }
        &-title{
            font-family: MiSansVF_Medium;
            font-size: 40px;
            color: #0D2B51;
            line-height: 53px;
            text-align: center;
            margin-top: 46px;
        }
        &-bottom{
            height: 688px;
            background: #FFFFFF;
            border-radius: 20px;
            margin-top: 30px;
            padding: 30px;
            box-sizing: border-box;
            &-title{
                font-family: MiSansVF_Medium;
                font-size: 30px;
                color: #000000;
                line-height: 39px;
                text-align: center;
                margin-bottom: 10px;
            }
            &-benefits{
                margin-top: 15px;
                span:nth-child(1){
                    font-family: MiSansVF_Medium;
                    font-size: 20px;
                    color: rgba(0,0,0,0.51);
                    line-height: 27px;
                    margin-right: 15px;
                }
                span:nth-child(2){
                    font-family: MiSansVF_Medium;
                    font-size: 20px;
                    color: #000000;
                    line-height: 27px;
                }
            }
        }
    }
    &-item:last-child{
        margin-right: 0;
    }
}
.qidai{
    height: 100%;
    padding-top: 300px;
    text-align: center;
    font-family: MiSansVF_Medium;
    font-size: 20px;
    color: #000000;
}
</style>